<template>
  <div class="main">
    <scroll :isEnd='isEnd'
            @pullup='loadMore'
            :isLoading='true'
            :preventDefaultException='{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }'
            :tagException='{ className: /(^|\s)chat-box(\s|$)/ }'
            ref='scrollBox'>
      <!-- 列表显示的内容：
        1、调研类型的问卷
        2、设置了投屏时间且问卷在有效投屏时间内的投票类型的问卷 -->
      <ul class="qa-list">
        <li class="qa-item"
          v-for="(info,i) in surveyList"
          :key="`survey${i}`">
          <p class="title">
            <span class="type vote"
              :class="{
                'vote': info.type === 'VOTE',
                'survey': info.type === 'SURVEY'
              }">{{info.type | handleSurveyType}}</span>
            <span class="text">{{info.title}}</span>
          </p>
          <div class="num-btn">
            <p class="num">{{info.count}}人已参与</p>
            <p class="btn"
              v-if="!info.joined"
              @click="goSurveyDetail(info)">参与</p>
            <p class="btn"
              v-else
              @click="goSurveyResult(info)">查看结果</p>
          </div>
        </li>
      </ul>
    </scroll>
  </div>
</template>
<script>
import scroll from '@/components/scroll'
export default {
  components: {
    scroll
  },
  data () {
    return {
      meetingId: this.$route.query.meetingId,
      meetingType: this.$route.query.meetingType,
      sessionId: '',
      isEnd: true,
      page: 1,
      pageSize: 10,
      surveyList: []
    }
  },
  methods: {
    // 获取投票调研列表
    fetchSurveyList () {
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/survey/list/${sessionStorage.getItem('agentId')}/${this.meetingId}/${sessionStorage.getItem('userId')}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data && data.list && data.list.length) {
            let surveyList = data.list
            this.surveyList = this.surveyList.concat(surveyList)
            if (this.surveyList.length < data.total) {
              this.isEnd = false
              this.page++
            } else {
              this.isEnd = true
            }
            this.refreshScroll()
          } else {
            this.surveyList = []
            this.isEnd = true
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 加载更多
    loadMore () {
      this.fetchSurveyList()
    },
    refreshScroll () {
      setTimeout(() => {
        if (this.$refs.scrollBox) {
          this.$refs.scrollBox.refresh()
        }
      }, 0)
    },
    // 到问卷详情页
    goSurveyDetail (survey) {
      // console.log('survey: ', survey)
      let unionType = ''
      switch (Number(this.meetingType)) {
        case 1: unionType = 'ON_LINE_MEETING'; break
        case 2: unionType = 'OFF_LINE_MEETING'; break
      }
      // 开启刷新开关
      sessionStorage.setItem('isReload', true)
      let url = `${location.origin}/cpsurvey/new/paper/${survey.surveyId}` +
                `?sessionId=${this.sessionId}` +
                `&unionId=${this.meetingId}` +
                `&unionType=${unionType}`
      location.href = url
    },
    // 到问卷结果页
    goSurveyResult (survey) {
      // 开启刷新开关
      sessionStorage.setItem('isReload', true)
      let url = `${location.origin}/cpsurvey/new/record/${survey.surveyId}/${survey.answerId}` +
                `?sessionId=${this.sessionId}`
      location.href = url
    },
    getSessionId () {
      let url = `/session/create`
      let params = {
        agentId: sessionStorage.getItem('agentId'),
        corpId: sessionStorage.getItem('corpId')
      }
      this.$posts(url, params).then(res => {
        if (res.code === 200 && res.data) {
          this.sessionId = res.data
        }
      })
    }
  },
  filters: {
    handleSurveyType (type) {
      switch (type) {
        case 'VOTE':
          return '投票'
        case 'SURVEY':
          return '调研'
        default:
          return ''
      }
    }
  },
  created () {
    /**
     * 问题：安卓手机，从会议投票调研进入问卷页面答题后，返回投票调研页面内容不刷新问题
     * 解决方法：跳转到问卷页面是开启刷新，返回时判断是否开启刷新，若开启就刷新
     */
    if (!this.isIOS() && sessionStorage.getItem('isReload')) {
      sessionStorage.removeItem('isReload')
      location.reload()
    }
    this.fetchSurveyList()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getSessionId()
    })
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  min-height 100vh
  background #F2F4F5
  .qa-list
    width 100%
    padded_box(border-box, 12px 12px 0)
    .qa-item
      width 100%
      background #fff
      padded_box(border-box, 16px 12px 12px)
      border-radius 12px
      & + .qa-item
        margin-top 12px
      .title
        width 100%
        max-height 40px
        line-height 20px
        ellipsis(2)
        .type
          display inline-block
          height 20px
          line-height 14px
          font-size 12px
          padded_box(border-box, 3px 5px 0)
          border 1px solid #333
          border-radius 4px
          margin-right 4px
          &.vote
            color #3BCE71
            border-color #3BCE71
          &.survey
            color #F0C800
            border-color #F0C800
        .text
          font-size 14px
          font-weight 700
          color #333
      .num-btn
        width 100%
        display flex
        justify-content space-between
        align-items center
        margin-top 8px
        .num
          line-height 14px
          font-size 12px
          color #999999
        .btn
          width 78px
          height 30px
          background #0080FF
          line-height 14px
          text-align center
          font-size 12px
          color #fff
          border-radius 15px
          padded_box(border-box, 8px 15px)
</style>
